<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex的简写测试</title>
		<style>
			.container {
				height: 100px;
				background-color: yellow;
				display: flex;
			}
			.item1 {
				background-color: red;
				/* 1.有剩余空间会自动放大占满所有空间，等价于flex-grow:1 */
				flex: 1;
				/* 2.不放大 不缩小 长度等于内容长度 */
				flex: 0 0 auto;
				/* 3. 不放大 不缩小 长度等于设置的主轴项目尺寸500px */
				flex: 0 0 500px;
				/* 4. 会放大 会缩小，项目会根据剩余空间自适应*/
				flex: 1 1 auto;
				/* 5. 有剩余空间也不放大，空间不足可以缩小，长度为主轴项目尺寸500px*/
				flex: 0 1 500px;
				/* 6. 会放大 不缩小，长度为项目长度 */
				flex: 1 0 auto;
			}
			.item2 {
				background-color: green;
				width: 300px;
			}
			.item3 {
				background-color: blue;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item1">11111111111111111111111111</div>
			<div class="item2">2222</div>
			<div class="item3">33333</div>
		</div>
	</body>
</html>